@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -280px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 280px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  animation-name: bounceInUp;
}

.animated {
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

.flow,
.examples,
.benefits {
  margin-top: 40px;
  margin-bottom: 40px;

  h2 {
    text-align: center;
    font-weight: 800;
    font-size: 54px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 30px;
  }

  pre {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    padding: 1.25em 1.5em;
    white-space: pre;
    word-wrap: normal;
    margin-top: 0;
  }

  .menu-list a {
    font-size: 24px;
    position: relative;

    img {
      width: 24px;
      position: relative;
      top: 3px;
      margin-right: 6px;
    }
  }

  .toggler {
    position: absolute;
    z-index: 5;
    right: 11px;
    /* border: 1px solid red; */
    padding: 10px;
    border-bottom-left-radius: 4px;
    font-weight: 600;
    background: #f7e5cc;
  }
}

.flow {
  .box {
    position: relative;
    text-align: center;
    box-shadow: none;

    h3 {
      margin-bottom: 30px;
      font-weight: 600;
      text-transform: uppercase;
    }

    ul,
    li {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    p {
      margin-top: 15px;
      text-transform: uppercase;
    }

    img {
      height: 140px;
    }

    i {
      position: absolute;
      font-size: 36px;
      top: 125px;
    }

    &.first {
      i {
        right: -24px;
      }
    }

    &.second {
      z-index: -1;
    }

    &.third {
      i {
        left: -24px;
      }
    }
  }
}
